/*
在global.less文件中，除了常用的颜色和尺寸变量外，还可以声明其他一些全局样式变量和混合（mixins），以提高样式的复用性和可维护性。以下是一些常见的全局样式元素和变量的示例：

全局样式变量
布局相关变量：
@grid-gutter-width: 网格系统的栅格间距。
@container-max-widths: 不同屏幕尺寸下的容器最大宽度，例如@container-sm: 576px; @container-md: 720px;等。
阴影和边框：
@box-shadow-base: 基础阴影效果。
@border-color-base: 基础边框颜色。
@border-width-base: 基础边框宽度。
动画和过渡：
@animation-duration-base: 基础动画持续时间。
@transition-base: 基础过渡效果。
间距（Spacing）：
除了上面提到的@padding-base等，还可以定义更多的间距变量，如@margin-base、@gutter（用于垂直或水平间距）等。
字体家族（Font Family）：
@font-family-base: 基础字体家族。
可以为标题、段落等定义不同的字体家族变量。

混合（Mixins）
Mixins是Less中非常强大的功能，允许你将一组属性从一个规则集包含（或混合）到另一个规则集中。以下是一些常见的混合示例：

清除浮动：

.clearfix() {  
  &::after {  
    display: block;  
    clear: both;  
    content: "";  
  }  
}

边框圆角:

.border-radius(@radius) {  
  border-radius: @radius;  
}


文本截断：
.text-ellipsis() {  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}

媒体查询：

.responsive(@rules) {  
  @media (max-width: @screen-xs-max) { @rules(); }  
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @rules(); }  
  // ... 为其他断点定义媒体查询  
}


参考：https://lesscss.cn/features/
主题参考：https://blog.csdn.net/chaoPerson/article/details/131409443
*/





*{margin: 0%;padding: 0px;}

  
// 常用颜色  
@primary-color: #1890ff; // 主色调  
@success-color: #52c41a; // 成功色  
@warning-color: #faad14; // 警告色  
@error-color: #f5222d; // 错误色  
@info-color: #1890ff; // 信息色  
@text-color: #333; // 主文本色  
@text-color-secondary: #666; // 次文本色  
@background-color: #f5f5f5; // 背景色  
  
// 常用尺寸  
@font-size-base: 14px; // 基础字体大小  
@font-size-lg: 16px; // 大号字体  
@font-size-sm: 12px; // 小号字体  
@border-radius-base: 4px; // 基础边框圆角  
@border-radius-lg: 8px; // 大号边框圆角  
@border-radius-sm: 2px; // 小号边框圆角  
@padding-base: 8px; // 基础内间距  
@padding-lg: 16px; // 大号内间距  
@padding-sm: 4px; // 小号内间距


.border-radius(@radius) {  
  border-radius: @radius;  
}  
  
.text-ellipsis() {  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  

// .example {  
//   color: @primary-color;  
//   padding: @padding-base;  
//   .border-radius(@border-radius-base);  
//   .text-ellipsis();  
// }  
.example{
  color: @text-color; // 使用在global.less中定义的文本颜色变量  
  font-size: @font-size-lg; // 使用大号字体变量  
  // padding: @padding-base; // 使用基础内间距变量  
  background-color: @background-color; // 使用背景色变量  
  border-radius: @border-radius-base; // 使用基础边框圆角变量
}


// input:focus {  
//   outline: none; /* 移除默认的聚焦边框 */  
//   border-color: #ff0000; /* 你可以设置一个新的边框颜色，或者完全不设置边框 */  
// }
// 重置表单元素样式  
input,  
button,  
select,  
textarea {  
  // 移除所有表单元素的默认样式，如边框、背景等  
  border: none;  
  background: none;  
  outline: none; // 移除焦点时的轮廓线  
  box-shadow: none; // 移除阴影  
  border-radius: 0; // 移除边框圆角  
  // 根据需要添加其他样式重置...  
  
  // 设置统一的字体样式  
  font-family: inherit;  
  font-size: inherit;  
  color: inherit;  
  
  // 添加一些基本的样式以确保可用性  
  padding: 8px; // 内边距  
  margin: 0; // 外边距  
}  
  
// 为输入框添加特定的样式  
input[type="text"],  
input[type="email"],  
input[type="password"] {  
  // 添加边框、背景色等  
  border: 1px solid #ccc; // 灰色边框  
  background-color: #fff; // 白色背景  
  border-radius: 4px; // 边框圆角  
  // 添加其他特定样式...  
}  
  
// 为按钮添加特定的样式  
button {  
  // 添加背景色、边框等  
  background-color: #1890ff; // 蓝色背景  
  color: #fff; // 白色文本  
  padding: 10px 16px; // 内边距  
  border-radius: 4px; // 边框圆角  
  cursor: pointer; // 鼠标悬停时显示指针  
  // 添加其他特定样式...  
}  
  
// 为选择框和文本区域添加特定的样式（如果需要）  
select,  
textarea {  
  // 添加边框、背景色等  
  border: 1px solid #ccc; // 灰色边框  
  background-color: #fff; // 白色背景  
  border-radius: 4px; // 边框圆角  
  // 添加其他特定样式...  
}  
  
// 添加表单元素在获得焦点时的样式  
input:focus,  
button:focus,  
select:focus,  
textarea:focus {  
  // 添加焦点时的样式，如边框颜色变化  
  border-color: #1890ff; // 蓝色边框  
  // 添加其他焦点样式...  
}


// 使用字体

// @font-face {
//   font-family: 'MyFont';
//   src: url('./MyFont.ttf') format('truetype'); /* 根据实际字体文件格式调整 */
//   font-weight: normal;
//   font-style: normal;
//   font-display: swap; /* 字体加载时显示系统字体，提升用户体验 */
// }
 
// body {
//   font-family: 'MyFont', sans-serif;
// }
// .my-font-text {
//   font-family: 'MyFont', sans-serif;
// }
// <div class="my-font-text">
//     这是使用自定义字体的文本。
//   </div>
